<template>
  <div class="info-detail">
<!--    <ChatContent></ChatContent>-->
    <div class="info-time"></div>
    <div class="info-detail-list">
      <div class="info-detail-left msg msg-right" v-if="from == 1">

        <div class="img-wrapper">
          <img class="img" :src="from1" />
        </div>
        <div class="message-wrapper message-wrapper-right">
          <div class="message">{{ message }}</div>
        </div>

        <div class="detail-left">
          <div class="detail-chat">
            <div class="detail-avatar">
              <n-avatar
                  round
                  :size="48"
                  src="https://yqwzh.ink/SchoolCupid/defaultImg/default_headImg.png"
              />
            </div>
            <div class="detail-tit">
              <div id="image-scroll-container"
                   style="
                  overflow: auto;
                  height: 100px;
                  display: flex;
                  flex-direction: column;
                  gap: 8px;
                "
              >
                <n-image
                    v-for="(src, index) in srcList"
                    :key="index"
                    width="100"
                    height="100"
                    lazy
                    :src="src"
                    :intersection-observer-options="{
                    root: '#image-scroll-container'
                  }"
                >
                </n-image>
              </div>
              <!--            <img src="../../assets/home/3.png" alt="">-->
              <p>发送的聊天信息</p>
            </div>
          </div>
        </div>
      </div>
      <div class="info-detail-right msg msg-left" v-else>

        <div class="img-wrapper">
          <img class="img" :src="from2" />
        </div>
        <div class="message-wrapper message-wrapper-left">
          <div class="message">{{ message }}</div>
        </div>

        <div class="detail-right">
          <div class="detail-chat">
            <div class="detail-avatar">
              <n-avatar
                  round
                  :size="48"
                  src="https://yqwzh.ink/SchoolCupid/defaultImg/default_headImg.png"
              />
            </div>
            <div class="detail-tit">
              <div id="image-scroll-container"
                   style="
                  overflow: auto;
                  height: 100px;
                  display: flex;
                  flex-direction: column;
                  gap: 8px;
                "
              >
                <n-image
                    v-for="(src, index) in srcList"
                    :key="index"
                    width="100"
                    height="100"
                    lazy
                    :src="src"
                    :intersection-observer-options="{
                    root: '#image-scroll-container'
                  }"
                >
                </n-image>
              </div>
              <!--            <img src="../../assets/home/3.png" alt="">-->
              <p>发送的聊天信息</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "InfoDetailList",
  props: {
    from: Number, // 1: 自己    2: 别人
    message: String,
    timestamp: Date,
  },
  setup(){
    return{
      srcList:[
        'https://picsum.photos/id/1/100/100',
      ],
      from1: require("../../assets/home/bg-1.png"),
      from2: require("../../assets/home/bg-2.png"),
      chatItems:[
        {
          type:1,
          message:"fdaf地方撒风大撒风阿斯顿飞fd阿斯顿飞安德森发大水发大水发大水奋斗发的大撒风安德森 发大发大水发",
          from:1,
          timestamp: new Date()
        },
        {
          type:1,
          message:"fdaf地方撒风大撒aa风阿斯顿飞ffdsafsfadsfadsfjlkjsadflkosdajfl asdjlffsaf水奋斗发的大撒风安德森 发大发大水发",
          from:1,
          timestamp: new Date()
        },
        {
          type:1,
          message:"做紧d咩嘢?",
          from:2,
          timestamp: new Date()
        },
        {
          type:1,
          message:"？？？",
          from:2,
          timestamp: new Date()
        },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
  .info-detail{
    overflow: hidden;
  }
  .info-detail-list{
    /*display: flex;*/
    /*justify-content: space-between;*/
  }
  .detail-left{
    overflow: hidden;
    float: left;
  }
  .detail-chat{
    display: flex;
  }
  .detail-tit{
    padding: 0 20px;
  }

//  聊天页面
  .msg {
    display: flex;
    flex-direction: row;
    .message-wrapper {
      max-width: 220px;
      margin: 0px 10px 0px 10px;
      .message {
        margin: 8px;
        word-wrap: break-word; //英文换行
      }
    }
    .message-wrapper-left {
      background-color: lightslategray;
      border-radius: 0px 12px 12px 12px;
    }
    .message-wrapper-right {
      background-color: powderblue;
      border-radius: 12px 0px 12px 12px;
    }
    .img {
      flex: auto;
      height: 36px;
      width: 36px;
      border-radius: 8px;
    }
  }
  .msg-right {
    flex-direction: row-reverse;
  }
  .msg-left {
    flex-direction: row;
  }
</style>